import React, { Component } from 'react'
import avatar from '../../assets/avatar.png'
import uuid from 'react-uuid'

export default class Form extends Component {
  state = {
    comment: '',
  }
  handleClick = () => {
    // !#2 子组件调用传递过来方法的同时并传递参数
    this.props.addComment({
      id: uuid(),
      author: '尼古拉斯.赵四',
      comment: this.state.comment,
      time: new Date(),
      img: avatar,
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
    })
    this.setState({ comment: '' })
  }
  render() {
    return (
      <div className='comment-send'>
        <div className='user-face'>
          <img className='user-head' src={avatar} alt='' />
        </div>
        <div className='textarea-container'>
          <textarea
            cols='80'
            rows='5'
            placeholder='发条友善的评论'
            className='ipt-txt'
            value={this.state.comment}
            onChange={(e) => this.setState({ comment: e.target.value })}
          ></textarea>
          <button className='comment-submit' onClick={this.handleClick}>
            发表评论
          </button>
        </div>
        <div className='comment-emoji'>
          <i className='face'></i>
          <span className='text'>表情</span>
        </div>
      </div>
    )
  }
}
